<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>财务管理</el-breadcrumb-item>
      <el-breadcrumb-item>资金流水</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.label" :name="item.id" >
            <el-table
              :data="productList[item.type]"
              stripe
              border
              style="width: 100%">
              <el-table-column
                  prop="oid"
                  label="订单号">
              </el-table-column>
              <el-table-column
                  prop="price"
                  label="商品价格（元）">
              </el-table-column>
              <el-table-column
                  prop="number"
                  label="商品数量">
              </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="下单时间">
                    <template slot-scope="scope">
                        <div>{{setDate(scope.row.createTime)}}</div>
                    </template>
                </el-table-column>
            </el-table>
            </el-tab-pane>
        </el-tabs>

      </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            activeName:'1',
            productList:[],
            tabs:[{
                label:'商品流水',
                id:'1',
                type:"goods",
                typeId:'goodsId'
            },{
                label:'租赁流水',
                id:'2',
                type:"rents",
                typeId:'rentId'
            },{
                label:'会员卡流水',
                id:'3',
                type:"vips",
                typeId:'vipId'
            },{
                label:'订场流水',
                id:'4',
                type:"yards",
                typeId:'yardId'
            },]
        }
    },
    async created(){
        this.getComputed()
    },
    methods:{
      async getComputed(){
          const { data } = await this.$http.get('venue/manage/capital')
          if (data.state !== 0) {
            return this.$message.error(data.msg)
          }
          this.productList = data.result
          console.log(this.productList)
      },
        setDate(originValue) {
            const dt = new Date(originValue)
            const y = dt.getFullYear()
            // 月份，字符串不足两位以0填充
            const m = (dt.getMonth() + 1 + '').padStart(2, '0')
            const d = (dt.getDate() + '').padStart(2, '0')
            const hh = (dt.getHours() + '').padStart(2, '0')
            const mm = (dt.getMinutes() + '').padStart(2, '0')
            const ss = (dt.getSeconds() + '').padStart(2, '0')

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        },
    }
}
</script>

<style scoped>
    .add{
        display: flex;
        justify-content: flex-end;
    }
    .add .el-button{
        margin-bottom: 10px;
    }
</style>